<template>
    <el-card>
        <el-radio-group v-model="radio" size="large" @change="radioChange">
            <el-radio-button label="严重告警" :value="1"></el-radio-button>
            <el-radio-button label="紧急警告" :value="2"></el-radio-button>
            <el-radio-button label="重要告警" :value="3"></el-radio-button>
            <el-radio-button label="一般告警" :value="4"></el-radio-button>
        </el-radio-group>
    </el-card>
    <el-card v-loading="loading" class="mt" v-for="item in AlarmList" :key="item.equNo">
        <el-alert :title="item.address + '充电桩充电异常'" type="warning" show-icon />
        <el-descriptions class="mt" :border="true" :column="4" direction="vertical">
            <el-descriptions-item :label="getLabel(key)" v-for="(value, key) in item" :key="key">
                <el-tag v-if="key === 'level'" :type="value === 1 ? 'danger' : (value === 2 ? 'warning' : '')">
                    {{ value === 1 ? '严重' : (value === 2 ? '紧急' : '一般') }}
                </el-tag>
                <el-text v-else-if="key === 'status'" type="danger">
                    {{ value == 1 ? "待指派" : (value == 2 ? "处理中" : "处理异常") }}
                </el-text>
                <span v-else>{{ value }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="操作">
                <el-button @click="OpenDarwer(item.equNo)" :type="item.status == 2 ? 'warning' : 'primary'">{{
                    item.status === 1 ? '指派' : (item.status === 2 ? '查看' : '催办') }}</el-button>
            </el-descriptions-item>
        </el-descriptions>
    </el-card>
    <el-drawer v-model="drawer" title="I am the title" :with-header="false">
        <h1 class="test mt mb">报警任务指派</h1>
        <stepForm :steps="steps" :form1="form1" :form2="form2" :form3="form3" @handleSubmit="subitFormData">
            <template #step-1>
                <el-form ref="form1" class="mt" :model="formData.basicInfo" :rules="basicRules">
                    <el-form-item label="姓名：" prop="name">
                        <el-input v-model="formData.basicInfo.name"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱：" prop="email">
                        <el-input v-model="formData.basicInfo.email"></el-input>
                    </el-form-item>
                    <el-form-item label="电话：" prop="tel">
                        <el-input v-model="formData.basicInfo.tel"></el-input>
                    </el-form-item>
                    <el-form-item label="工号：" prop="no">
                        <el-input v-model="formData.basicInfo.no"></el-input>
                    </el-form-item>
                    <el-form-item label="是否加急：">
                        <el-switch v-model="formData.basicInfo.urgent"></el-switch>
                    </el-form-item>
                    <el-form-item label="其他选项：">
                        <el-checkbox-group v-model="formData.basicInfo.other">
                            <el-checkbox label=" 更换设备" :value="1" />
                            <el-checkbox label="仅维修" :value="2" />
                            <el-checkbox label="需拍照片" :value="3" />
                            <el-checkbox label="需报备" :value="4" />
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="其他备注信息：">
                        <el-input v-model="formData.basicInfo.remarks" type="textarea"></el-input>
                    </el-form-item>
                </el-form>
            </template>
            <template #step-2>
                <el-form ref="form2" class="mt" :model="formData.approvalInfo" :rules="approvalRules">
                    <el-form-item label="审批部门" prop="approvalDep">
                        <el-select v-model="formData.approvalInfo.approvalDep">
                            <el-option label='总裁办' :value="1"></el-option>
                            <el-option label='总裁办' :value="2"></el-option>
                            <el-option label='维修部' :value="3"></el-option>
                            <el-option label='市场部' :value="4"></el-option>
                            <el-option label='财务部' :value="5"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="抄送部门" prop="sendDep">
                        <el-select v-model="formData.approvalInfo.sendDep">
                            <el-option label='总裁办' :value="1"></el-option>
                            <el-option label='总裁办' :value="2"></el-option>
                            <el-option label='维修部' :value="3"></el-option>
                            <el-option label='市场部' :value="4"></el-option>
                            <el-option label='财务部' :value="5"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </template>
            <template #step-3>
                <el-form ref="form3" class="mt" :model="formData.person" :rules="personRule">
                    <el-form-item label="负责人姓名：" prop="name">
                        <el-input v-model="formData.person.name"></el-input>
                    </el-form-item>
                    <el-form-item label="负责人电话：" prop="tel">
                        <el-input v-model="formData.person.tel"></el-input>
                    </el-form-item>
                </el-form>
            </template>
        </stepForm>
        <el-result icon="warning" :title="'设备编号:'+no" sub-title="请抓紧处理次任务，任务已经等待了2个小时">
            <template #extra>
                <el-button @click="drawer = false" type="primary">我已知晓</el-button>
            </template>
        </el-result>
    </el-drawer>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getAlarmListAPI } from '@/api/alarm'
import { getLabel } from './fileldLabelMap'
import stepForm from '@/components/stepForm/stepForm.vue'
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'
interface AlarmType {
    address: string,
    code: number,
    description: string,
    equNo: string,
    level: number, //1严重 2紧急 3一半
    status: number, //1待指派 2处理中 处理异常
    time: string
}
const loading = ref<boolean>(false)
const AlarmList = ref<AlarmType[]>([])
const radio = ref<number>(1)
const loadData = async () => {
    loading.value = true
    const { data } = await getAlarmListAPI()
    console.log(data)
    loading.value = false
    AlarmList.value = data
    console.log(AlarmList.value)
}
onMounted(() => {
    loadData()

})
const no = ref<string>()
const OpenDarwer = (equNo:string)=>{
    no.value = equNo
    drawer.value = true
}
const radioChange = (value:any)=>{
    loadData()
}





const drawer = ref<boolean>(false)
const form1 = ref<FormInstance>()
const form2 = ref<FormInstance>()
const form3 = ref<FormInstance>()

const steps = [
    { title: '基本信息' },
    { title: '审批信息' },
    { title: '负责人信息' },
]
// form表单数据
const formData = ref({
    basicInfo: {
        name: '',
        email: '',
        tel: '',
        no: '',
        urgent: true,
        other: [],
        remarks: ''
    },
    approvalInfo: {
        approvalDep: 1,
        sendDep: 1
    },
    person: {
        name: '',
        tel: ''
    }
})
const basicRules = {
    name: [
        { required: true, message: '名称不可以为空', trigger: 'blur' }
    ],
    email: [
        { required: true, message: '邮箱不可以为空', trigger: 'blur' },
    ],
    tel: [
        { required: true, message: '电话不可以为空', trigger: 'blur' }
    ],
    no: [
        { required: true, message: '工号不可以为空', trigger: 'blur' }
    ]
}
const approvalRules = {
    approvalDep: [
        { required: true, message: '审批部门不可以为空', trigger: 'blur' }
    ],
    sendDep: [
        { required: true, message: '抄送部门不可以为空', trigger: 'blur' },
    ]
}
const personRule = {
    name: [
        { required: true, message: '名称不可以为空', trigger: 'blur' }
    ],
    tel: [
        { required: true, message: '电话不可以为空', trigger: 'blur' }
    ]
}
const subitFormData = () => {
    drawer.value = false

    ElMessage({
        message: '操作成功',
        type: 'success',
    })
}
</script>

<style lang="less" scoped>
.test {
    display: inline-block;
}
</style>